'use strict';

new Vue({
  el: '#root',

  data: {
    years: [],
    months: [],
    dates: [],
    selectedYear: '',
    selectedMonth: '',
    selectedDate: '',
    lunarMonths: [],
    dayMap: ['日', '一', '二', '三', '四', '五', '六']
  },

  created: function created() {
    var dateIst = new Date();
    var year = dateIst.getFullYear();
    var month = dateIst.getMonth() + 1;
    var date = dateIst.getDate();
    this.years = this.getYears(1900, 2100);
    this.months = this.getMonths();
    this.selectedYear = year;
    this.selectedMonth = month;
    this.selectedDate = date;
    this.dates = this.getDates(year, month);
    this.lunarMonths = this.getLunar(year, month).monthData;
  },


  watch: {
    selectedYear: function selectedYear(val) {
      this.dates = this.getDates(val, this.selectedMonth);
    },
    selectedMonth: function selectedMonth(val) {
      this.dates = this.getDates(this.selectedYear, val);
    }
  },

  computed: {
    selectedDayZh: function selectedDayZh() {
      var year = this.selectedYear;
      var month = this.selectedMonth;
      var date = this.selectedDate;
      var dayOffset = new Date(year + '-' + month + '-' + date).getDay();
      return '\u661F\u671F' + this.dayMap[dayOffset];
    },
    lunarMonthDate: function lunarMonthDate() {
      var year = this.selectedYear;
      var month = this.selectedMonth;
      var date = this.selectedDate;
      return '' + this.getSelectedLunar('M') + this.getSelectedLunar('d');
    },
    lunarYear: function lunarYear() {
      var year = this.selectedYear;
      var month = this.selectedMonth;
      var date = this.selectedDate;
      return this.getSelectedLunar('T') + ' \u3010' + this.getSelectedLunar('A') + '\u5E74\u3011';
    }
  },

  filters: {
    leftPad: function (_leftPad) {
      function leftPad(_x) {
        return _leftPad.apply(this, arguments);
      }

      leftPad.toString = function () {
        return _leftPad.toString();
      };

      return leftPad;
    }(function (str) {
      return leftPad(str, 2, '0');
    })
  },

  methods: {
    getYears: function getYears(startYear, endYear) {
      var ret = [];
      var yearsLen = endYear - 1900;
      for (var i = startYear; i <= endYear; i++) {
        ret.push(i);
      }
      return ret;
    },
    getLunar: function getLunar(year, month, day, format) {
      return chineseLunar.solarToLunar(new Date(year + '/' + month + '/' + day), format);
      // return lunar
    },
    getSelectedLunar: function getSelectedLunar(format) {
      var year = this.selectedYear;
      var month = this.selectedMonth;
      var date = this.selectedDate;
      return '' + this.getLunar(year, month, date, format);
    },
    getMonths: function getMonths() {
      var ret = [];
      for (var i = 1; i <= 12; i++) {
        ret.push(i);
      }
      return ret;
    },
    getCalendarData: function getCalendarData(year, month) {
      var thisMonthDay = new Date(year, month - 1, 1);
      var thisMonthFirstDay = thisMonthDay.getDay();
      var thisMonthTotalDates = new Date(year, month, 0);
      return {
        firstDay: thisMonthFirstDay,
        totalDates: thisMonthTotalDates.getDate()
      };
    },
    onClickDate: function onClickDate(date) {
      this.selectedDate = date;
      this.dates = this.getDates(this.selectedYear, this.selectedMonth);
    },
    getDates: function getDates(year, month) {
      var calendarData = this.getCalendarData(year, month);
      var ret = [];
      for (var date = 1, i = 0; date <= calendarData.totalDates; i++) {
        if (i < calendarData.firstDay) {
          ret.push({
            date: '',
            lunarDate: ''
          });
        } else {
          var lunarDate = this.getLunar(year, month, date, 'D');
          var selectedYear = this.selectedYear,
              selectedMonth = this.selectedMonth,
              selectedDate = this.selectedDate;

          var isActive = selectedYear + '-' + selectedMonth + '-' + selectedDate === year + '-' + month + '-' + date;
          ret.push({
            date: date,
            lunarDate: lunarDate,
            isFestival: lunarDate.indexOf('月') > -1,
            isActive: isActive
          });
          date++;
        }
      }
      return ret;
    }
  }

});